import React from 'react';
import { connect } from 'dva';
import LoginForm from './LoginForm';
import styles from './login.css'
import {
  Form, Modal,Input,Icon,Button,Checkbox
} from 'antd';
function Login({dispatch,registervisible,form,isvip,isCheckd} ){
 
  const { getFieldDecorator } = form;
  let handleCancel = (e) => {
    dispatch({
      type: 'login/setState',
      payload: {
        registervisible: false,
      }
    })
  }
  
  function registerVIP(e) { 
    dispatch({
        type:'login/setState',
        payload:{
          isCheckd:!e.target.checked,
        }
    })
 }
  function Submit(e) {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
      console.log(values)
      if(values.vip){
        isvip=1
      }else isvip =0;
      dispatch({
        type:'login/register',
        payload:{
          username:values.userName,
            password:values.passWord,
            isvip:isvip
        }
    })
    dispatch({
      type:'login/setState',
      payload:{
          isvip:isvip
      }
  })
 });   
}
  return (
    <div className={styles.bg}>
      <h1 className={styles.h1}>密码功耗分析系统</h1>
      <div className={styles.login_box}>
        <h3 className={styles.h3}>请登录</h3>
        <LoginForm/>
      </div>
      {
        registervisible? <Modal
        title="添加用户"
        visible={registervisible}
        onOk={Submit}
        onCancel={handleCancel}
        okText="注册"
        cancelText="取消"
      >
    <Form onSubmit={Submit} className="login-form" layout="vertical">
      <Form.Item   label="用户名"  wrapperCol={{ span: 24 }} style={{ marginTop: 20 }}>
        {getFieldDecorator('userName', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(
          <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名"  />
        )}
      </Form.Item>

      <Form.Item  label="密码"  wrapperCol={{ span: 24 }} style={{ marginTop: 22 }}>
        {getFieldDecorator('passWord', {
          rules: [{ required: true, message: 'Please input your Password!' }],
        })(
          <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
        )}
      </Form.Item>

      <Form.Item  style={{ marginTop: 22 }}>
        {getFieldDecorator('vip', {
          valuePropName: 'checked',
          initialValue: true,
        })(
          <Checkbox onChange={registerVIP} setFieldsValue={{ checked: isCheckd }}>是否注册为会员</Checkbox>
        )}
        </Form.Item>
      
      
    </Form>

      </Modal>
         :null
      }
     
    </div>
  );
}
const WrappedNormalRegisterForm = Form.create({ name: 'normal_register' })(Login);
export default connect(({ login }) => ({ ...login }))(WrappedNormalRegisterForm)
